<script setup lang="ts">
import homeFooterCom from '../../components/homeFooterCom.vue'
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
const searchtext = ref('')//要搜索的文本
const hotCategoryList: any = ref([])
const hotsearchList: any = ref([])
import { gethotCategoryList } from '../../api/user'
import { gethotsearchList } from '../../api/search'
onMounted(() => {

    gethotCategoryList({}).then(res => {
        console.log(222, res.data.hotCategoryList);
        hotCategoryList.value = res.data.hotCategoryList
    })
    gethotsearchList({}).then(res => {
        console.log(24, res.data.hotsearchList);
        hotsearchList.value = res.data.hotsearchList
    })

})
import { useRouter } from 'vue-router';
const router = useRouter()
import { getCourseList } from '@/api/user';
interface iCourse {
    id: number;
    courseTitle: string;
    courseteacher: string;
    coursename:string;
}
interface iSearch{
    coursename:string;
    courseteacher:string;
}
const courseList: Ref<Array<iCourse>> = ref([]);
const searchList: Ref<Array<iSearch>> = ref([])//放搜索结果数组

onMounted(() => {
    getCourseList({}).then(res => {
        console.log(4, res.data.courseList);
        courseList.value = res.data.courseList
    })

})


function searchClick() {
    //要拿数据
    console.log(searchtext.value);
    searchList.value = []
    for (let i = 0; i < courseList.value.length; i++) {
        if(searchtext.value==''){
            break
        }
        if (courseList.value[i].coursename.includes(searchtext.value) == true) {
            console.log('aa', courseList.value[i].coursename.includes(searchtext.value));
            searchList.value.push(courseList.value[i]);
            console.log('找到匹配的课程');
        }
    }
    console.log(searchList.value);
}
</script>
<template>
    <div class="center">
        <!-- 关键字搜索 -->
        <section>
            <van-field v-model="searchtext" placeholder="请输入关键字搜索" style="background-color: #f7f7f7;width: 80vw;" @update:model-value="searchClick"/>
            <div class='search' @click="searchClick">
                <img src="../../assets/home/搜索.png" alt="">
            </div>
        </section>
        <!-- 热门搜索 -->
        <van-cell title="热门搜索" />
        <div class="hot_search">
            <div v-for="item in hotsearchList" :key="item"
                style="width: 80px;font-size: 14px;height: 30px;;background-color: #f7f7f7;margin-bottom: 10px;text-align: center;">
                {{ item.search }}
            </div>
        </div>

        <!-- 分类 -->
        <van-cell title="分类" @click="$router.push('/home/courseListView')" />
        <div class="hot_category">
            <div v-for="value in hotCategoryList" :key="value" class="hot_category">
                <img :src="value.categoryImg" alt="">
                <span>{{ value.categoryTitle }}</span>
            </div>
        </div>
        <div class="hot_category">
            <div v-for="value in hotCategoryList" :key="value" class="hot_category">
                <img :src="value.categoryImg" alt="">
                <span>{{ value.categoryTitle }}</span>
            </div>
        </div>

        <van-cell title="您的搜索结果" />
     
        <div v-if="searchList.length>0" v-for="(item,index) in searchList" :key="index" class="courselist">
            <div class="left">
                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </div>
            <div class="right">
                <p style="font-size: 0.16rem;margin-bottom: 0.1rem">{{ item.coursename }}</p>
                <p>{{ item.courseteacher }}</p>
                <p>
                    <van-image style="width: 12px;"
                        src="https://cdn7.axureshop.com/demo2023/2246171/images/11-%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%E8%AE%BE%E8%AE%A1it/%E5%BD%A2%E7%8A%B6_u546.svg">

                    </van-image> <span style="display: inline-block;width: 160px;">5K学员 &#X3000; &#X3000;⭐4.8
                    </span>
                </p>

            </div>
        </div>
        <van-empty v-else  description="No Data" />
        <!-- footer -->
        <homeFooterCom></homeFooterCom>
    </div>
</template>
<style lang="scss" scoped>
.center {
    padding: 5vw;
    box-sizing: border-box;
}

section {
    display: flex;

    margin-bottom: 6vw
}

.search {
    background-color: #f7f7f7;
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        background-size: cover;
        width: 0.2rem;
        border: none;
    }
}

.hot_search {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.hot_category {
    width: 100%;
    height: 126px;
    display: flex;
    flex-direction: row;
    position: relative;
    box-sizing: border-box;
    justify-content: space-between;

    img {
        display: flex;
        flex-direction: column;
        width: 92%;
        height: 114px;
        position: relative;
    }

    span {
        position: absolute;
        bottom: 14px;
        left: 30%;
        z-index: 99;
        color: #fff;
        font-weight: bold;
    }

}

.courselist {
    box-sizing: border-box;
    padding: 2vw 2vw 2vw 4vw;
    display: flex;

    .left {
        width: 100px;
        margin-right: 2vw;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>